<template>
  <div class="person-style">
    <NavBar :title="title" />
    <div class="content-top">
      <div class="feedback">
        <h3>反馈您的问题</h3>

        <ul>
          <li :class="{ active: feedBackType === '功能异常' }" @click="feedBackType = '功能异常'">
            功能异常
          </li>
          <li :class="{ active: feedBackType === '产品建议' }" @click="feedBackType = '产品建议'">
            产品建议
          </li>
          <li :class="{ active: feedBackType === '吐槽' }" @click="feedBackType = '吐槽'">
            吐槽
          </li>
          <li :class="{ active: feedBackType === '其他' }" @click="feedBackType = '其他'">
            其他
          </li>
        </ul>

        <van-field v-model="context" rows="10" autosize type="textarea" maxlength="500" show-word-limit placeholder="留下您的意见或反馈,我们会不断改进~" style="
            border: 1px solid #eee;
            border-radius: 10px;
            margin-bottom: 20px;
            font-size: 16px;
            color: #333;
          " />

        <van-button type="primary" :loading="loading_submit" block color="#05A6F0" round style="font-size: 18px" text="提交" @click="onSubmit">
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import { Button, Field, Toast } from "vant";
export default {
  name: "FeedBack",
  components: {
    NavBar,
    [Button.name]: Button,
    [Field.name]: Field,
  },
  props: ["title"],
  // 定义属性
  data() {
    return {
      feedBackType: "功能异常",
      context: "",
      loading_submit: false,
    };
  },
  // 方法集合
  methods: {
    onSubmit() {
      if (this.context.length === 0) {
        Toast("请填写意见或反馈");
        return;
      }
      this.loading_submit = true;
      this.$api.post('/PAC/AddFeedBack',{ feedBackType: this.feedBackType, context: this.context }).then(res => {
        this.loading_submit = false;
        if (res.success) {
          Toast.success('反馈成功');
          this.$router.go(-1);
        }
        else { Toast.fail(res.msg) }
      })
    },
  },
};
</script>

<style scoped>
.person-style .feedback {
  position: fixed;
  top: 46px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px;
  background-color: #fff;
}

.person-style .feedback h3 {
  display: flex;
  margin: 0;
  font-size: 18px;
  color: #333;
}

.person-style .feedback ul {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}

.person-style .feedback ul li {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 30px;
  border: 1px solid #eee;
  border-radius: 34px;
  font-size: 14px;
  color: #666;
}

.person-style .feedback ul li + li {
  margin-left: 10px;
}

.person-style .feedback ul li.active {
  border-color: #05A6F0;
  background-color: #fff;
  font-weight: 500;
  color: #05A6F0;
}

.person-style .feedback .van-cell::after {
  display: none;
}
</style>